<template>
    <div>
        <header >
            <van-icon name="arrow-left" class="header-left" @click="but" /><span class="header-center">歌单详情</span>
        </header>
        <main>
            <div class="top" :style= "'background-image: url('+songList.coverImgUrl+')'" >
                <!--                    {{songList.description}}-->
               <h2 class="toph2">
                   {{songList.name}}
               </h2>

            </div>
        </main>
        <footer>

            <ul class="text-outer">
                <li v-for="(item,index) in tracks" :key="index" class="text-list">
                    <!--                    <div class="text-inner">-->
                    <p class="text-left">{{index+1}}</p>

                    <div class="text-right">
                        <router-link :to="{path:'/listdetailr',query:{id:item.id}}">
                            <p class="text-list-p1">{{item.name}}</p>
                            <p class="text-list-p2">{{item.al.name}}</p>
                        </router-link>
                    </div>

                    <!--                    </div>-->
                </li>
            </ul>
        </footer>
        <!--        <button @click="chage">返回</button>-->


    </div>

</template>

<script>
    import {getSongListDetails} from "../api/api"
    export default {
        name: "detail",
        data(){
            return{
                songList:[],
                tou:'',
                name:"",
                coverImgUrl:"",
                tracks:[],

            }
        },
        created() {
            console.log(this.$route.params.id);
            // let course=this.$route.params.id;

            getSongListDetails(this.$route.params.id).then((res) =>{
                this.coverImgUrl=res.playlist.coverImgUrl
                this.tou=res.playlist.creator.avatarUrl
                this.name=res.playlist.creator.nickname
                // console.log(res)
                this.songList=res.playlist
                console.log(this.songList)
                // console.log(res.playlist.tracks)
                // console.log(this.songList)
                this.tracks=res.playlist.tracks
            }).catch((sda)=>{
                console.log(sda)
            })


        },
        methods:{
            but(){
                // this.flag=!this.flag
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped>
    .toph2{
        line-height: 200px;
    }
    header{
        margin-top: 20px;
    }
    .header-left{
        float: left;
        font-size: 20px;
        overflow: hidden;
    }
    .header-center{
        font-size: 20px;
    }
    main{
        margin-top: 20px;
    }
    .top{
        width: 100%;
        height: 200px;
        /*border: 1px solid black;*/
        /*filter: blur(2px);*/

        /*z-index: 1;*/

    }

    .imgbox{
        width: 30%;
        height: 120px;
        /*border: 1px solid black;*/
        /*overflow: hidden;*/
        margin:40px 10px;
        float: left;

    }
    .imgbox img{
        width: 120px;
        height: 120px;
        /*z-index: 2;*/
        /*filter: blur(2px);*/
    }
    .textbox{
        width: 60%;
        float: right;
        /*border: 1px solid black;*/
        margin-top: 38px;
        z-index: 2;
        color: white;
    }
    .text-p2{
        text-align: left;
        margin-top: 50px;
    }

    .text-p2 img{
        border-radius: 50%;
        width: 50px;
        vertical-align: middle;

    }
    footer{
        width: 100%;
        height: 500px;
        /*border: 1px solid black;*/
    }
    .text-outer{
        margin-top: 30px;
    }
    .text-list{
        width: 100%;
        height: 50px;

        text-align: left;
        padding-left: 10px;
    }
    /*.text-inner{*/
    /*    width: 80%;*/
    /*    height: 50px;*/
    /*    margin: auto;*/
    /*    border-bottom: 1px solid #AAAAAA;*/
    /*}*/
    .text-left{
        width: 10%;
        float: left;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
    }
    .text-right{
        width: 80%;
        float: left;
        border-bottom: 1.5px solid #AAAAAA;
        border-radius: 3px;
        margin-right: 10px;
        color: black;
    }
    .text-list-p1{
        font-size: 18px;
        color: black;
    }
    .text-list-p2{
        font-size: 15px;
        color: #ACB7CB;
    }
    *{
        margin: 0;
        padding: 0;
    }
</style>